<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS插件开发之lightbox</title>
    <link rel="stylesheet" type="text/css" href="lightbox.css">
    <!--[if (gte IE 10)|!(IE)]><!-->
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <!--<![endif]-->
    <!--[if lte IE 9]>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <![endif]-->
</head>
<body>
<div>
    <p>data-role='lightbox'表示该元素要启用lightbox</p>
    <p>data-group='group-2'表示当前元素是否属于一个组</p>
    <p>data-id='2'表示该元素在该组别的索引值</p>
    <p>data-caption='lightbox'表示该元素的描述文字</p>
</div>
<div class="lightbox-box">
    <h2>第一组</h2>
    <img src="images/1-1.jpg" data-role='lightbox' data-group='group-1' data-id='11' data-caption='第一组1-1' alt="第一组">
    <img src="images/1-2.jpg" data-role='lightbox' data-group='group-1' data-id='12' data-caption='第一组1-2' alt="第一组">
    <img src="images/1-3.jpg" data-role='lightbox' data-group='group-1' data-id='13' data-caption='第一组1-3' alt="第一组">
    <img src="images/1-4.jpg" data-role='lightbox' data-group='group-1' data-id='14' data-caption='第一组1-4' alt="第一组">
    <img src="images/1-5.jpg" data-role='lightbox' data-group='group-1' data-id='15' data-caption='第一组1-5' alt="第一组">
    <img src="images/1-6.jpg" data-role='lightbox' data-group='group-1' data-id='16' data-caption='第一组1-6' alt="第一组">
</div>
<div class="lightbox-box">
    <h2>第二组</h2>
    <img src="images/2-1.jpg" data-role='lightbox' data-group='group-2' data-id='21' data-caption='第一组2-1' alt="第二组">
    <img src="images/2-2.jpg" data-role='lightbox' data-group='group-2' data-id='22' data-caption='第一组2-2' alt="第二组">
</div>
<script src="lightbox.js"></script>
</body>
</html>